<template>

  <div class="charts" id="dom-echarts" style="height:100%">
  </div>
</template>

<!--招标次数-->
<script setup lang="ts">
import {
  onMounted, watch, onUnmounted, nextTick
} from "vue";
import * as echarts from 'echarts';

const props = defineProps({
  tcData: {
    type: Object,
    required: true
  }
});

let myChart = null;

// 窗口大小变化处理函数
const handleResize = () => {
  if (myChart) {
    myChart.resize();
  }
};

const renderChart = () => {
  nextTick(() => {
    if (!props.tcData || !props.tcData.length) return;

    const chartDom = document.getElementById('dom-echarts');
    if (!chartDom) return;

    if (!myChart) {
      myChart = echarts.init(chartDom);
    }

    const option = {
    title: {
      text: `投标次数`,
      top: '5%',
      left: 'center',
      textStyle: {
        fontSize: 16, // 标题字号设置（可根据需求调整，16px为常用适中大小）
        fontWeight: 'normal', // 可选：默认加粗，设为normal可取消加粗
        rich: {
          colorBlock: {
            width: 16, // 颜色块宽度
            height: 16, // 颜色块高度（与字号匹配，视觉协调）
            backgroundColor: '#409EFF', // 颜色块颜色（与柱状图一致，统一风格）
            borderRadius: 2, // 可选：给颜色块加轻微圆角，更精致
            marginRight: 8 // 颜色块与标题文字的间距（避免拥挤）
          }
        }
      }
    },
    xAxis: {
      type: 'category',
      data: props.tcData.map((item) => item.mouth)
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      left: '3%',
      top: '20%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [{
      data: props.tcData.map(item => item.bidCount),
      type: 'bar',
      // 设置柱状图颜色
      itemStyle: {
        color: 'rgba(22, 119, 255, 1)' // 指定柱状图的颜色
      },
      // 在柱状图上显示数值
      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置，可选 'top', 'inside', 'bottom' 等
        formatter: props.tcData.map(item => item.bidCount) // 显示数值
      }
    }]
  };

  myChart.setOption(option);
  });
};

// 如果 data 是异步的，监听变化
watch(() => props.tcData, () => {
  renderChart();
}, { deep: true });

onMounted(() => {
  renderChart();
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 组件卸载时移除事件监听和销毁图表实例
  window.removeEventListener('resize', handleResize);
  if (myChart) {
    myChart.dispose();
    myChart = null;
  }
});
</script>
